'use client'

import React, { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Input } from "@/components/ui/input"
import { Ellipsis } from "lucide-react"

export default function Page() {
  const [draftCount, setDraftCount] = useState(0)
  const [inputValue, setInputValue] = useState('')
  return (
    <div className="relative">
      <div className="absolute right-4">
        <Input placeholder="请输入标题关键字" maxLength={12} value={inputValue} onChange={(e) => setInputValue(e.target.value)}/>
      </div>
      <Tabs defaultValue="article" className="w-full">
        <TabsList>
          <TabsTrigger value="article">文章</TabsTrigger>
          <TabsTrigger value="draft">草稿箱({draftCount})</TabsTrigger>
        </TabsList>
        <TabsContent value="article">
          <div className="py-2 pr-6 pl-6 -mx-4 border-b hover:bg-gray-50 cursor-pointer">
            <div className="flex justify-between pb-2">
              <p>
                npm、cnpm、yarn、pnpm区别
              </p>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon" className="">
                      <Ellipsis />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent className="w-20 mr-10 p-0 bg-white shadow-xl shadow-gray-300" side="bottom">
                    <div className="flex flex-col">
                      <Button variant="ghost" size="icon" className="w-full text-black hover:">编辑</Button>
                      <Button variant="ghost" size="icon" className="w-full text-black hover:">删除</Button>
                    </div>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
            <div className="text-gray-400">
              <span className="pr-4 border-r">2024-06-03 18:08</span>
              <span className="pl-4">200阅读</span>
              <span className="px-2">·</span>
              <span>3点赞</span>
              <span className="px-2">·</span>
              <span>3评论</span>
            </div>
          </div>
        </TabsContent>
        <TabsContent value="draft">
          <div className="py-2 pr-6 pl-6 -mx-4 border-b hover:bg-gray-50 cursor-pointer">
            <div className="flex justify-between pb-2">
              <p>
                npm、cnpm、yarn、pnpm区别
              </p>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon" className="">
                      <Ellipsis />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent className="w-20 bg-white shadow-xl shadow-gray-300" side="left">
                    <div className="flex flex-col">
                      <Button variant="ghost" size="icon" className="w-full text-black">编辑</Button>
                      <Button variant="ghost" size="icon" className="w-full text-black">删除</Button>
                    </div>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
            <div className="text-gray-400">
              <span className="pr-4 border-r">2024-06-03 18:08</span>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
